<template>
  <view>
    <view class="navbar">
      <uni-nav-bar @clickLeft="goback" leftIcon="left" fixed="true" border="false" color="#FFF" statusBar="true"
        backgroundColor="#22b9a3" :title="projectName" />
    </view>
    <view class="backwall">
      <!-- 商品类别背景图 -->
      <image class="category-bg" :src="project.cover"></image>
    </view>
    <view class="container">
      <!-- 商品列表 -->
      <view class="goods-list">
        <view class="goods-item" v-for="(program, index) in programList" :key="program.id">
          <view class="goods-image">
            <image :src="program.icon"></image>
          </view>
          <view class="goods-info">
            <text class="goods-name">{{ program.name }}</text>
            <view>
              <text class="goods-price">￥{{ ( program.price/100).toFixed(2)  }}</text>
              <text class="goods-original-price">原价￥{{( program.originalPrice/100).toFixed(2) }}</text>
            </view>
            <text class="goods-description">{{ program.label }}</text>
            <button style="width:180rpx;height:50rpx;font-size:28rpx;" class="book-button"
              @click="gotoProgramDetail(program)">立即预约</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    uselocation
  } from '@/stores/location.js';
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    ref
  } from 'vue';

  const location = uselocation()
  //获取参数
  const projectId = ref()
  const projectName = ref()
  //获取服务
  const project = ref({
    cover: null
  })
  const programList = ref([])
  onLoad(async (option) => {
    projectId.value = option.projectId
    projectName.value = option.projectName
    //获取项目背景图
    const result = await http.getRequest("/peizhen/project/get", {
      id: projectId.value
    })
    if (result.code == 0) {
      project.value = result.data
    } else {
      uni.showToast({
        title: '获取服务类型失败',
        icon: 'error',
        duration: 1000
      })
    }
    //获取服务
    const programResult = await http.getRequest("/peizhen/open-city/program/list-id", {
      // cityCode: location.locationInfo.id,
      cityCode: 410100,
      projectId: projectId.value,
    })
    if (programResult.code == 0) {
      programList.value = programResult.data
    } else {
      uni.showToast({
        title: '获取服务失败',
        icon: 'error',
        duration: 1000
      })
    }
  })

  function goback() {
    uni.navigateBack()
  }
  //跳转到详情页
  function gotoProgramDetail(program){
    uni.navigateTo({
      url:`/pages/project/program/program?programId=${program.id}&programName=${program.name}`
    })
  }
</script>

<style lang="scss" scoped>
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: $uni-font-size-title !important;
    font-family: "siyuan";
  }

  .backwall {
    position: sticky;
    top: 172rpx;
    z-index: 100;
    image {
      width: 750rpx;
      height: 282rpx;
    }
  }

  /* 样式调整 */
  .container {

    padding: 10rpx;
    background-color: #f5f5f5;
    /* 浅灰色背景，增加层次感 */
  }

  .goods-list {}

  .goods-item {
    display: flex;
    border: 3rpx solid #ddd;
    /* 边框 */
    border-radius: 14rpx;
    /* 圆角边框 */
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    position: relative;
    margin-bottom: 30rpx;
  }

  .goods-image image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 14rpx;
    margin-right: 15rpx;
  }



  .goods-info {
    padding: 18rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* 垂直方向上均匀分布内容 */
  }

  .goods-name {
    font-size: 31rpx;
    font-weight: bold;
    /* 加粗标题 */
    color: #333;
  }

  .goods-price,
  .goods-original-price {
    color: #f44336;
    display: inline;
    /* 红色价格标签 */
  }

  .goods-original-price {
    text-decoration: line-through;
    /* 划线表示原价 */
    font-size: 24rpx;
    color: #999;
    margin-left: 50rpx;
    /* 浅灰色原价 */
  }

  .book-button {
    background-color: #24c373;
    color: white;
    border-radius: 15rpx;
    border: none;
    position: absolute;
    line-height:50rpx ;
    right: 20rpx;
    bottom: 20rpx;
  }
</style>